﻿@namespace Microsoft.FluentUI.AspNetCore.Components
@inherits ListComponentBase<TOption>
@typeparam TOption

<CascadingValue Value=@_internalListContext Name="ListContext" TValue="InternalListContext<TOption>" IsFixed=true>
    <div class="@ClassValue fluent-autocomplete-multiselect"
         style="@StyleValue">
        <FluentInputLabel ForId="@Id" Label="@Label" AriaLabel="@GetAriaLabel()" ChildContent="@LabelTemplate" />
        <FluentKeyCode Anchor="@Id" OnKeyDown="@KeyDownHandlerAsync" Only="@CatchOnly" StopPropagation="true" PreventDefault="true" />

        <FluentTextField role="combobox"
                         @ref="@Element"
                         Id="@Id"
                         AutoComplete="@AutoComplete"
                         Appearance="@Appearance"
                         Disabled="@Disabled"
                         Placeholder="@(this.SelectedOptions?.Any() == false ? Placeholder : string.Empty)"
                         aria-expanded="@(IsMultiSelectOpened ? "true" : "false")"
                         aria-controls="@(IsMultiSelectOpened ? IdPopup : string.Empty)"
                         aria-label="@GetAutocompleteAriaLabel()"
                         Value="@_valueText"
                         Required="@Required"
                         @onclick="@OnDropDownExpandedAsync"
                         @oninput="@InputHandlerAsync"
                         @onfocusout="@(e => { IsReachedMaxItems = false; })"
                         Style="@ComponentWidth">
            @* Selected Items *@
            @if (this.SelectedOptions?.Any() == true)
            {
                <fluent-horizontal-scroll id="@IdScroll" style="width: 100%;" slot="start">
                    <fluent-flipper onclick="document.getElementById('@IdScroll').scrollToPrevious()"
                                    slot="previous-flipper"
                                    aria-hidden="false"
                                    aria-label="@TitleScrollToPrevious"
                                    title="@TitleScrollToPrevious"
                                    role="button"
                                    tabindex="0"
                                    class="previous fluent-autocomplete-previous"
                                    direction="previous"></fluent-flipper>
                    <fluent-flipper onclick="document.getElementById('@IdScroll').scrollToNext()"
                                    slot="next-flipper"
                                    aria-hidden="false"
                                    aria-label="@TitleScrollToNext"
                                    title="@TitleScrollToNext"
                                    role="button"
                                    tabindex="0"
                                    class="next fluent-autocomplete-next"
                                    direction="next"></fluent-flipper>
                    @foreach (var item in this.SelectedOptions)
                    {
                        if (SelectedOptionTemplate == null)
                        {
                            <FluentBadge Appearance="@AspNetCore.Components.Appearance.Neutral"
                                         OnDismissClick="@(e => RemoveSelectedItemAsync(item))"
                                         aria-label="@GetOptionText(item)">
                                @GetOptionText(item)
                            </FluentBadge>
                        }
                        else
                        {
                            @SelectedOptionTemplate(item)
                        }
                    }
                    &nbsp;
                </fluent-horizontal-scroll>
            }
            @if (!Disabled)
            {
                if (this.SelectedOptions?.Any() == true || !string.IsNullOrEmpty(_valueText))
                {
                    <FluentIcon Value="@(new CoreIcons.Regular.Size16.Dismiss())"
                                Width="12px"
                                Style="cursor: pointer;"
                                Slot="end"
                                Title="Clear"
                                OnClick="@OnClearAsync" />
                }
                else
                {
                    <FluentIcon Value="@(new CoreIcons.Regular.Size16.Search())"
                                Width="16px"
                                Style="cursor: pointer;"
                                Slot="end"
                                Title="Search"
                                OnClick="@OnDropDownExpandedAsync" />
                }
            }
        </FluentTextField>

        @* List of available items *@
        @if (IsMultiSelectOpened)
        {
            <FluentOverlay OnClose="@(e => IsMultiSelectOpened = false)" Visible="true" Transparent="true" FullScreen="true" />
            <FluentAnchoredRegion Anchor="@Id"
                                  HorizontalDefaultPosition="HorizontalPosition.Right"
                                  HorizontalInset="true"
                                  VerticalDefaultPosition="@VerticalPosition.Unset"
                                  Style="margin-top: 10px; border-radius: calc(var(--control-corner-radius) * 2px); background-color: var(--neutral-layer-floating);"
                                  Shadow="ElevationShadow.Flyout">
                @if (HeaderContent != null)
                {
                    @HeaderContent(Items ?? Array.Empty<TOption>())
                }

                <div id="@IdPopup" role="listbox" style="@ListStyleValue" tabindex="0">
                    @if (Items != null)
                    {
                        var selectableItem = GetOptionValue(SelectableItem);
                        foreach (TOption item in Items)
                        {
                            var value = GetOptionValue(item);
                            <FluentOption TOption="TOption"
                                          Value="@value"
                                          Style="@OptionStyle"
                                          Class="@OptionClass"
                                          Selected="@GetOptionSelected(item)"
                                          Disabled="@(GetOptionDisabled(item) ?? false)"
                                          OnSelect="@OnSelectCallback(item)"
                                          selectable="@(value == selectableItem)">
                                @if (OptionTemplate == null)
                                {
                                    @GetOptionText(item)
                                }
                                else
                                {
                                    @OptionTemplate(item)
                                }
                            </FluentOption>
                        }
                    }
                </div>

                @if (FooterContent != null)
                {
                    @FooterContent(Items ?? Array.Empty<TOption>())
                }
            </FluentAnchoredRegion>
        }

        @* Tooltip *@
        else if (IsReachedMaxItems && MaximumSelectedOptionsMessage != null)
        {
            <FluentOverlay OnClose="@(e => IsReachedMaxItems = false)" Visible="true" Transparent="true" FullScreen="true" />
            <FluentAnchoredRegion Anchor="@Id"
                                  HorizontalDefaultPosition="HorizontalPosition.Right"
                                  HorizontalInset="true"
                                  VerticalDefaultPosition="@VerticalPosition.Unset"
                                  Style="margin-top: 10px; border-radius: calc(var(--control-corner-radius) * 2px); background-color: var(--neutral-layer-floating); padding: 10px;"
                                  Shadow="ElevationShadow.Flyout">
                @MaximumSelectedOptionsMessage
            </FluentAnchoredRegion>
        }
    </div>
</CascadingValue>
